<template>
  <div class="table">
    <table
      border="1"
      class="table-css"
    >
      <!-- <tr>
        <th>
          <span class="checkbox-style">
            <input
              v-model="shejiInfo"
              type="checkbox"
              name="productIds"
              @change="onChakanInfo(sheji)"
            >
          </span>
          <span class="header-font">
            {{ sheji }}
          </span>
        </th>
      </tr> -->
      <tr>
        <td class="tdhead">
          名称
        </td>
        <td class="td-content">
          <div
            v-if="message.sheji.ZH_LABEL!==''
              && message.sheji.ZH_LABEL!==undefined&& message.sheji.ZH_LABEL!==null"
            class="name-style"
            :title="message.sheji.ZH_LABEL"
          >
            {{ message.sheji.ZH_LABEL }}
          </div>
          <div
            v-else
            class="name-style"
          >
            无设计信息
          </div>
        </td>
      </tr>
      <tr v-if="!!message.sheji.LONGITUDE">
        <td class="tdhead">
          经度
        </td>
        <td class="td-content">
          <!-- {{ message.sheji.LONGITUDE }} || {{ 无设计信息 }} -->
          <div
            v-if="message.sheji.LONGITUDE!==''
              && message.sheji.LONGITUDE!==undefined&& message.sheji.LONGITUDE!==null"
            class="name-style"
            :title="message.sheji.LONGITUDE"
          >
            {{ message.sheji.LONGITUDE }}
          </div>
          <div
            v-else
            class="name-style"
          >
            无设计信息
          </div>
        </td>
      </tr>
      <tr v-if="!!message.sheji.LATITUDE">
        <td class="tdhead">
          纬度
        </td>
        <td class="td-content">
          <!-- {{ message.sheji.LATITUDE }} || {{ 无设计信息 }} -->
          <div
            v-if="message.sheji.LATITUDE!==''
              && message.sheji.LATITUDE!==undefined&& message.sheji.LATITUDE!==null"
            class="name-style"
            :title="message.sheji.LATITUDE"
          >
            {{ message.sheji.LATITUDE }}
          </div>
          <div
            v-else
            class="name-style"
          >
            无设计信息
          </div>
        </td>
      </tr>
    </table>

    <el-collapse accordion>
      <el-collapse-item>
        <template
          slot="title"
        >
          <div class="collapse-title">
            信息详情
          </div>
        </template>
        <div class="list-style">
          <!-- <el-form
            ref="form"
            :model="form"
            label-width="80px"
          >
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="产权性质">
                  自建
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产权性质">
                  自建
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产权性质">
                  自建
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="产权性质">
                  自建
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> -->
          <div
            v-for="(item,index) in message.sheji_show"
            :key="index"
            class="list-item"
          >
            {{ item.key }} : {{ item.value }}
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import _ from 'lodash';
import { queryLatAndLonLength } from '@/api/service/gisShow2020';

export default {
  name: 'ShowMessage',
  props: {
    message: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chakan: 'APP查勘信息',
      res: '存量利旧资源信息',
      gongcheng: 'APP采集信息',
      sheji: 'PC端设计信息',
      pic: 'APP拍照信息',
      chakanInfo: false,
      resInfo: false,
      gongchengInfo: false,
      shejiInfo: false,
      picInfo: false,
      // 选中的列
      selectInfo: [],
      msgData: '',
      Dvalue: '',
    };
  },
  methods: {
    // 清除选中项
    clearSelect() {
      this.chakanInfo = false;
      this.resInfo = false;
      this.gongchengInfo = false;
      this.shejiInfo = false;
      this.picInfo = false;
      this.Dvalue = '';
      this.msgData = '';
      this.selectInfo = [];
    },
    onChakanInfo(type) {
      if (type === this.res) {
        if (this.resInfo) {
          this.selectInfo.push({
            type: 'res',
            typecn: '存量利旧资源信息',
            longitude: this.message.res.LONGITUDE,
            latitude: this.message.res.LATITUDE,
          });
        } else if (this.selectInfo.length > 0) {
          _.remove(this.selectInfo, {
            type: 'res',
            typecn: '存量利旧资源信息',
            longitude: this.message.res.LONGITUDE,
            latitude: this.message.res.LATITUDE,
          });
        }
      }
      if (type === this.chakan) {
        if (this.chakanInfo) {
          this.selectInfo.push({
            type: 'chakan',
            typecn: 'APP查勘信息',
            longitude: this.message.chakan.LONGITUDE,
            latitude: this.message.chakan.LATITUDE,
          });
        } else if (this.selectInfo.length > 0) {
          _.remove(this.selectInfo, {
            type: 'chakan',
            typecn: 'APP查勘信息',
            longitude: this.message.chakan.LONGITUDE,
            latitude: this.message.chakan.LATITUDE,
          });
        }
      }
      if (type === this.sheji) {
        if (this.shejiInfo) {
          this.selectInfo.push({
            type: 'sheji',
            typecn: 'PC端设计信息',
            longitude: this.message.sheji.LONGITUDE,
            latitude: this.message.sheji.LATITUDE,
          });
        } else if (this.selectInfo.length > 0) {
          _.remove(this.selectInfo, {
            type: 'sheji',
            typecn: 'PC端设计信息',
            longitude: this.message.sheji.LONGITUDE,
            latitude: this.message.sheji.LATITUDE,
          });
        }
      }
      if (type === this.gongcheng) {
        if (this.gongchengInfo) {
          this.selectInfo.push({
            type: 'gongcheng',
            typecn: 'APP采集信息',
            longitude: this.message.gongcheng.LONGITUDE,
            latitude: this.message.gongcheng.LATITUDE,
          });
        } else if (this.selectInfo.length > 0) {
          _.remove(this.selectInfo, {
            type: 'gongcheng',
            typecn: 'APP采集信息',
            longitude: this.message.gongcheng.LONGITUDE,
            latitude: this.message.gongcheng.LATITUDE,
          });
        }
      }
      if (type === this.pic) {
        if (this.picInfo) {
          this.selectInfo.push({
            type: 'pic',
            typecn: 'APP拍照信息',
            longitude: this.message.pic.LONGITUDE,
            latitude: this.message.pic.LATITUDE,
          });
        } else if (this.selectInfo.length > 0) {
          _.remove(this.selectInfo, {
            type: 'pic',
            typecn: 'APP拍照信息',
            longitude: this.message.pic.LONGITUDE,
            latitude: this.message.pic.LATITUDE,
          });
        }
      }
      this.computeDeviate();
    },
    async computeDeviate() {
      if (this.selectInfo.length < 2) {
        this.msgData = '';
        this.Dvalue = '';
      } else if (this.selectInfo.length === 2) {
        console.log('选了两个', this.selectInfo);
        this.msgData = `${this.selectInfo[0].typecn}与${this.selectInfo[1].typecn}的偏移量`;
        const resultObj = await queryLatAndLonLength(this.selectInfo[0].latitude,
          this.selectInfo[0].longitude, this.selectInfo[1].latitude, this.selectInfo[1].longitude);
        console.log(resultObj);
        if (resultObj.data.success) {
          this.Dvalue = `${resultObj.data.data} 米`;
        } else {
          this.$message.error('经纬度差值计算失败，请检查！');
        }
      } else {
        this.msgData = '';
        this.Dvalue = '';
      }
    },
  },
};

</script>

<style lang="scss" scoped>
.table-css {
      width:100%;
      border:1px  #dbdadafd;
      border-collapse:collapse;
      font-size: 12px;
}
.table-css th {
      background-color: #f8f6f6fd;
      color:#979696fd;
      line-height: 25px;
}
.table-css td {
      line-height: 25px;
}
.checkbox-style{
  position: relative;
  top: 3px;
}
.header-font{
  position: relative;
  bottom: 2px;
}
.td-content {
  text-indent: 15px;
}
.tdhead {
      text-indent: 25px;
      color: #979696fd;
      letter-spacing:27px;
      text-align:center;
}
.tdhead1 {
      color: #979696fd;
      letter-spacing:1px;
      text-align:center;
      text-indent: 0px;
}
.name-style{
    width:170px;
    white-space:nowrap;
    word-break:keep-all;
}
/deep/ .el-collapse{
  border: #dcd7d7 1px solid;
  margin: 14px 0px 16px;
}
.collapse-title{
  font-weight: 600;
  margin-left: 20px;
}
.list-style{
  padding: 10px;
  display: flex;
  flex-direction: row;
  padding: 16px 20px;
  flex-wrap: wrap;
  .list-item{
    width:30%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
/deep/ .el-collapse-item__header{
  background: #f7f7f7;
}
/deep/ .el-form-item{
  margin-bottom: 0px;
}
/deep/ .el-collapse-item__content{
  padding-bottom: 0px;
}
</style>
